<template>
  <div class='noticeSwiper'>
    <!-- swiper -->
    <!-- 选择功能 -->
    <div class="type">
      <span>你也许关注</span>
    </div>
    <swiper :options="swiperOption">
      <swiper-slide v-for="(list,index) in message" :key="index">
        <div class='noticeSwiper-img-box' @click="goswiperlist(index)">
          <img class="noticeSwiper-img" :src="list.imgSrc" alt="">
        </div>
        <div class="noticeSwiper-content">
          <div class="noticeSwiper-list">
            <span class="noticeSwiper-tittle">{{list.title}}</span>
            <span class="noticeSwiper-time">{{list.time}}</span>
            <span class="noticeSwiper-rate">
              <van-rate
                style="width: auto;margin-right:.1rem;"
                readonly
                v-model="list.value"
                allow-half
                void-icon="star"
                void-color="#6b5da6"
                color= '#ffa272'
                @change= 'change(index)'
                size= ".3rem"
              />
              <span class="number">
                <span>({{list.number}})</span>
                <span class="collection" @click="starnumber(index)" v-if="list.collectionShow"><img src="@/assets/images/collection-color.png" alt=""></span>
                <span class="collection" @click="starnumber(index)" v-else><img src="@/assets/images/collection.png" alt=""></span>
              </span>
            </span>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { Rate } from 'vant';
  export default{
    props:{
      message:{
        type:Array
      }
    },
    data(){
      return{
        swiperOption: {
          slidesPerView: 1.5,
          spaceBetween: 30,
          freeMode: true,
        }
      }
    },
    mounted(){
   
    },
    methods:{
      starnumber(index){
        this.message[index].collectionShow = !this.message[index].collectionShow
      },
      // 星星变化事件
      change(index){
        console.log(index)
      },
      goswiperlist(index){
        switch (index) {
          case 0:
          console.log('路由1') 
          break;
          case 1:
          console.log('路由2') 
          break;
          case 2:
          console.log('路由3') 
          break;
        }
      }
    },
    components: {
      swiper,
      swiperSlide,
      [Rate.name]: Rate
    }
  }
</script>
<style scoped>
.noticeSwiper{
  padding-bottom: .5rem;
  width: 100%;
  height: auto;
}
.swiper-container{
  padding-left:.35rem;
  width: 100%;
  height: 5rem;
}
.swiper-slide:nth-child(2n) {
  width: 40%;
}
.swiper-slide:nth-child(3n) {
  width: 20%;
}
.noticeSwiper-img-box{
  width: 100%;
  height: 70%;
  overflow: hidden;
  border-radius: .2rem .2rem 0 0;
}
.noticeSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .2rem .2rem 0 0;
}
.swiper-slide{
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .4rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.noticeSwiper-content{
  font-size: .24rem;
  border-radius: 0 0 .2rem .2rem;
  height: 30%;
  background: #423f72;
}
.noticeSwiper-list{
  margin-left: .28rem;
}
.noticeSwiper-tittle{
  display: block;
  padding-top: .3rem;
  width: 88%;
  height: .35rem;
  line-height: .35rem;
  color: #fff;
}
.noticeSwiper-time{
  display: block;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  color: #ee5a8a;
}
.noticeSwiper-rate{
  display: flex;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.number{
  display: flex;
  flex: 1.5;
  color: #6b5da6;
}
.number span{
  flex: 1;
}
.number span img{
  width: .3rem;
  height: .3rem;
}
.collection{
  display: inline-block;
  text-align: right;
  margin-right: .25rem;
}
</style>